<!--
  Copyright © 2016 Cask Data, Inc.

  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
-->

<div class="row preview-no-data" ng-if="!HydratorPlusPlusNodeConfigCtrl.previewData && !HydratorPlusPlusNodeConfigCtrl.previewLoading">
  <div class="col-xs-12">
    <h3 class="text-center">
      Preview Data for stage "{{ HydratorPlusPlusNodeConfigCtrl.state.node.plugin.label }}" is not available.
    </h3>
  </div>
</div>

<div class="row preview-no-data" ng-if="HydratorPlusPlusNodeConfigCtrl.previewLoading">
  <div class="col-xs-12">
    <h3 class="text-center">
      <span class="fa fa-spin fa-refresh"></span>
      <span>Fetching preview data</span>
    </h3>
  </div>
</div>

<div class="row preview-tab" ng-if="HydratorPlusPlusNodeConfigCtrl.previewData">
  <!-- INPUT RECORDS -->
  <div ng-class="{'col-xs-12': HydratorPlusPlusNodeConfigCtrl.state.isSink, 'preview-records input': true, 'col-xs-6': HydratorPlusPlusNodeConfigCtrl.state.isTransform }"
       ng-if="!HydratorPlusPlusNodeConfigCtrl.state.isSource">
    <h4>Input Records</h4>

    <div ng-repeat="(key, value) in HydratorPlusPlusNodeConfigCtrl.previewData.input">

      <h5 class="stage-title"
          ng-if="HydratorPlusPlusNodeConfigCtrl.previewData.numInputStages > 1">
        {{ key }}
      </h5>
      <div ng-if="value.records.length > 0">
        <!-- INPUT RECORDS -->
        <table class="table table-bordered">
          <thead>
            <th ng-repeat="field in ::value.schema">
              {{ ::field }}
            </th>
          </thead>

          <tbody>
            <tr ng-repeat="row in ::value.records">
              <td ng-repeat="field in ::value.schema">
                {{ ::row[field] }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="text-center"
           ng-if="!value.records || value.records.length === 0">
        <h4 class="message"
            ng-if="HydratorPlusPlusNodeConfigCtrl.previewStatus &&
            HydratorPlusPlusNodeConfigCtrl.previewStatus === 'RUNNING'">
          Input records have not been generated yet. Please try again in some time.
        </h4>
        <h4 class="message"
            ng-if="HydratorPlusPlusNodeConfigCtrl.previewStatus &&
            HydratorPlusPlusNodeConfigCtrl.previewStatus !== 'RUNNING'">
          Input records have not been generated. Please verify your logic, or try sending more data
        </h4>
        <h4 class="message"
            ng-if="!HydratorPlusPlusNodeConfigCtrl.previewStatus">
          Input records are not available. Please try running preview again.
        </h4>
      </div>
    </div>

    <div class="text-center"
         ng-if="HydratorPlusPlusNodeConfigCtrl.previewData.numInputStages === 0">
      <h4 class="message"
          ng-if="HydratorPlusPlusNodeConfigCtrl.previewStatus &&
          HydratorPlusPlusNodeConfigCtrl.previewStatus === 'RUNNING'">
        Input records have not been generated for stage "{{ HydratorPlusPlusNodeConfigCtrl.state.node.plugin.label }}" yet. Please try again in some time.
      </h4>
      <h4 class="message"
          ng-if="HydratorPlusPlusNodeConfigCtrl.previewStatus &&
          HydratorPlusPlusNodeConfigCtrl.previewStatus !== 'RUNNING'">
        Input records have not been generated for stage "{{ HydratorPlusPlusNodeConfigCtrl.state.node.plugin.label }}". Please verify your logic, or try sending more data
      </h4>
      <h4 class="message"
          ng-if="!HydratorPlusPlusNodeConfigCtrl.previewStatus">
        Input records are not available for stage "{{ HydratorPlusPlusNodeConfigCtrl.state.node.plugin.label }}". Please try running preview again.
      </h4>
    </div>

  </div>

  <!-- OUTPUT RECORDS -->
  <div ng-class="{'col-xs-12': HydratorPlusPlusNodeConfigCtrl.state.isSource, 'preview-records output': true, 'col-xs-6': HydratorPlusPlusNodeConfigCtrl.state.isTransform}"
      ng-if="!HydratorPlusPlusNodeConfigCtrl.state.isSink">

    <h4>Output Records</h4>

    <div ng-if="HydratorPlusPlusNodeConfigCtrl.previewData.output.records.length > 0">
      <!-- OUTPUT RECORDS -->
      <table class="table table-bordered">
        <thead>
          <th ng-repeat="field in ::HydratorPlusPlusNodeConfigCtrl.previewData.output.schema">
            {{ ::field }}
          </th>
        </thead>

        <tbody>
          <tr ng-repeat="row in ::HydratorPlusPlusNodeConfigCtrl.previewData.output.records">
            <td ng-repeat="field in ::HydratorPlusPlusNodeConfigCtrl.previewData.output.schema">
              {{ ::row[field] }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="text-center"
         ng-if="!HydratorPlusPlusNodeConfigCtrl.previewData.output.records || HydratorPlusPlusNodeConfigCtrl.previewData.output.records.length === 0">
      <h4 class="message"
          ng-if="HydratorPlusPlusNodeConfigCtrl.previewStatus &&
          HydratorPlusPlusNodeConfigCtrl.previewStatus === 'RUNNING'">
        Output records have not been generated for stage "{{ HydratorPlusPlusNodeConfigCtrl.state.node.plugin.label }}" yet. Please try again in some time.
      </h4>
      <h4 class="message"
          ng-if="HydratorPlusPlusNodeConfigCtrl.previewStatus &&
          HydratorPlusPlusNodeConfigCtrl.previewStatus !== 'RUNNING'">
        Output records have not been generated for stage "{{ HydratorPlusPlusNodeConfigCtrl.state.node.plugin.label }}". Please verify your logic, or try sending more data
      </h4>
      <h4 class="message"
          ng-if="!HydratorPlusPlusNodeConfigCtrl.previewStatus">
        Output records are not available for stage "{{ HydratorPlusPlusNodeConfigCtrl.state.node.plugin.label }}". Please try running preview again.
      </h4>
    </div>

  </div>
</div>
